<template>
  <div>
    <n-modal v-model:show="props.modelValue">
      <n-card style="width: 600px" title="编辑资料" closable @close="clickPop" :bordered="false" size="huge" role="dialog"
        aria-modal="true">
        <div class="formData">
          <n-form ref="formRef" :model="model" :rules="rules" label-placement="left" label-width="auto"
            require-mark-placement="right-hanging">
            <n-form-item label="用户名" path="inputName">
              <n-input v-model:value="model.inputName" placeholder="请输入用户名" />
            </n-form-item>

            <n-form-item label="密码" path="inputPassword">
              <n-input v-model:value="model.inputPassword" placeholder="请输入密码" />
            </n-form-item>

            <n-form-item label="昵称" path="NickName">
              <n-input v-model:value="model.NickName" placeholder="请输入昵称" />
            </n-form-item>

            <n-form-item label="邮箱" path="NickName">
              <n-input v-model:value="model.postBox" placeholder="请输入邮箱" />
            </n-form-item>
          </n-form>

          <div>
            <n-button attr-type="button" @click="handleValidateClick">
              提交
            </n-button>
          </div>
        </div>


      </n-card>
    </n-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { FormInst, useMessage, FormItemRule } from 'naive-ui'

const message = useMessage()
const showModal = ref(false)

const props = defineProps(['modelValue'])

const emit = defineEmits(['update:modelValue'])

const formRef = ref<FormInst | null>(null)
const model = ref({
  inputName: '',
  inputPassword: '',
  NickName: '',
  postBox: ''
})

const rules = {
  inputName: {
    required: true,
    trigger: ['blur', 'input'],
    validator(rule: FormItemRule, value: string) {
      if (!value) {
        return new Error("请输入用户名");
      } else if (value.indexOf(" ") != -1) {
        return new Error("用户名称里不允许有空格");
      } else if (value.length > 15) {
        return new Error("用户名称字符不能超出15个");
      }
      return true;
    },
  },
  inputPassword: {
    required: true,
    trigger: ['blur', 'input'],
    validator(rule: FormItemRule, value: string) {
      if (!value) {
        return new Error("请输入密码");
      } else if (value.indexOf(" ") != -1) {
        return new Error("密码里不允许有空格");
      } else if (value.length > 15) {
        return new Error("密码长度不超出15个字符");
      } else if (value.length < 6) {
        return new Error("密码长度不小于6个字符");
      }
      return true;
    },
  },
  NickName: {
    required: true,
    trigger: ['blur', 'input'],
    validator(rule: FormItemRule, value: string) {
      if (!value) {
        return new Error("请输入昵称");
      } else if (value.indexOf(" ") != -1) {
        return new Error("昵称里不允许有空格");
      } else if (value.length > 15) {
        return new Error("昵称字符不能超出15个");
      }
      return true;
    }
  },
  postBox: {
    required: true,
    message: '请输入邮箱',
    trigger: ['input', 'blur']
  }
}

const handleValidateClick = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success('Valid')
    } else {
      console.log(errors)
      message.error('Invalid')
    }
  })
}

const clickPop = () => {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.formData {}

:deep() {

  // card组件的padding
  .n-card__content {
    padding: 10px;
  }

  .n-card-header {
    padding: 7px;

    .n-card-header__main {
      text-align: center;
    }
  }

  .n-menu-item-content-header {
    text-align: left !important;
  }

  .n-layout-content.n-layout.n-layout--static-positioned {
    padding: 1px !important;
  }
}
</style>